<!-- ERC-设备巡检-巡检任务 -->
<template>
  <div>
    <px-table :data="tableData" class="inspect-table" size="small" height="calc(100vh - 254px)" border>
      <px-table-column fixed="left" prop="workOrderCode" label="任务单号" min-width="140" show-overflow-tooltip>
        <template #default="scope">
          <span v-if="isHasPermission('ERC_MAINTAIN_DETAIL')" style="color: #3b82f6; cursor: pointer" @click="handleView(scope.row)">
            {{ scope.row.workOrderCode }}
          </span>
          <span v-else>{{ scope.row.workOrderCode }}</span>
        </template>
      </px-table-column>
      <px-table-column prop="workOrderName" label="工单主题" min-width="200" show-overflow-tooltip />
      <px-table-column prop="positionCodeDesc" label="维修状态" min-width="120" show-overflow-tooltip>
        <template #default="scope">
          <px-tag
            effect="plain"
            :style="{
              color: `${tagColorList[scope.row.workOrderStatus]}`,
              border: `1px solid ${tagBorderColorList[scope.row.workOrderStatus]}`,
              backgroundColor: `${tagBgColorList[scope.row.workOrderStatus]}`,
              cursor: 'pointer'
            }"
          >
            {{ scope.row.workOrderStatusDesc }}
          </px-tag>
        </template>
      </px-table-column>
    </px-table>
  </div>
</template>
<script setup lang="ts">
import { isHasPermission } from "@/utils/auth";
import { computed } from "vue";
import { useRouter } from "vue-router";
const tagColorList = {
  0: "#F59E0B", // 待维修
  1: "#3B82F6", // 维修中
  2: "#F59E0B", // 审核中
  3: "#EF4444", // 已驳回
  5: "#909399", // 已撤销
  6: "#9254DE" // 驳回不通过
};

const tagBorderColorList = {
  0: "#FCE2B6", // 待维修
  1: "#C6E2FF", // 维修中
  2: "#FCE2B6", // 审核中
  3: "#FAC7C7", // 已驳回
  4: "#B7EAD9", // 已完成
  5: "#E9E9EB", // 已撤销
  6: "#DDC2FF" // 驳回不通过
};

const tagBgColorList = {
  0: "#FEF5E6", // 待维修
  1: "#ECF5FF", // 维修中
  2: "#FEF5E6", // 审核中
  3: "#FEECEC", // 已驳回
  4: "#E8F8F3", // 已完成
  5: "#F4F4F5", // 已撤销
  6: "#F2E7FF" // 驳回不通过
};
const props = defineProps(["data"]);
const tableData = computed(() => {
  return props.data || [];
});
const router = useRouter();
const handleView = row => {
  router.push(`/erc/maintain/detail?id=${row.id}`);
};
</script>

<style lang="scss" scoped>
.inspect-table {
  --px-table-border-color: #dfdfdf;

  font-size: 14px;

  :deep(.px-table__header) {
    thead {
      tr {
        background-color: #e7eefb !important;

        th {
          font-size: 14px;
          font-weight: bold;
          color: #000;
          background-color: #e7eefb !important;
        }
      }
    }
  }
}
</style>
